<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的学习进度 - 中山大学刷题平台</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-main-green': '#045525',
                        'sysu-lightBlue': '#E8F0FE',
                        'sysu-darkBlue': '#0F2E6E',
                        'sysu-gray': '#F7F9FC',
                        'sysu-green': '#36B37E',
                        'sysu-yellow': '#FFAB00',
                        'sysu-red': '#FF5630',
                        'sysu-purple': '#6554C0',
                        'easy': '#36B37E',
                        'medium': '#FFAB00',
                        'hard': '#FF5630'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            }
            .calendar-day {
                @apply w-8 h-8 rounded-full flex items-center justify-center text-sm transition-all duration-200 relative text-gray-700;
            }
            .calendar-day:hover {
                @apply transform scale-110 z-10 bg-gray-100;
            }
            .calendar-day.has-activity {
                @apply bg-sysu-lightBlue text-sysu-main-green font-medium;
            }
            .calendar-day.high-activity {
                @apply bg-sysu-main-green text-white;
            }
            .calendar-day.other-month {
                @apply text-gray-300;
            }
            .stat-card {
                @apply bg-white rounded-xl p-5 card-shadow transition-all duration-300 hover:shadow-lg;
            }
            .badge {
                @apply px-2.5 py-1 rounded-full text-xs font-medium;
            }
            .progress-ring-circle {
                transition: stroke-dashoffset 0.5s ease;
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-main-green text-white rounded-lg flex items-center justify-center mr-3 shadow-sm">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-main-green">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航（桌面端） -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors">首页</a>
                    <a href="/questions" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors">题库</a>
                    <a href="/contests" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors">竞赛</a>
                    <a href="/ranking" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors">排行榜</a>
                    <a href="/resources" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="hidden lg:flex items-center relative">
                        <input type="text" placeholder="搜索题目/资源"
                               class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:border-sysu-main-green focus:outline-none focus:ring-2 focus:ring-sysu-main-green/20 w-48 text-sm">
                        <i class="fa fa-search absolute left-3 text-gray-400"></i>
                    </div>

                    <!-- 用户头像 -->
                     <!-- 用户区域容器（初始为空，由JS动态填充） -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-blue rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <script>
                    // 页面加载完成后检查登录状态
                    document.addEventListener('DOMContentLoaded', function() {
                        checkLoginStatus();
                        initSmoothEffects();
                    });

                    // 检查登录状态的AJAX请求
                    async function checkLoginStatus() {
                        const container = document.getElementById('user-area-container');
                        const loadingIndicator = document.getElementById('loading-indicator');

                        try {
                            const token = localStorage.getItem('token');
                            // 发送请求到后端验证接口
                            const response = await fetch('/api/check_login', {
                                method: 'GET',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            });

                            if (!response.ok) {
                                throw new Error('验证请求失败');
                            }

                            const data = await response.json();

                            // 根据返回的登录状态渲染不同内容
                            if (data.is_logged_in) {
                                console.log(data.avatar);
                                renderLoggedInView(container, data || {});
                            } else {
                                renderLoggedOutView(container);
                            }
                        } catch (error) {
                            console.error('登录状态验证出错:', error);
                            // 出错时默认显示登录/注册按钮
                            renderLoggedOutView(container);
                        } finally {
                            // 隐藏加载指示器
                            if (loadingIndicator) {
                                loadingIndicator.remove();
                            }
                        }
                    }

                    // 渲染已登录视图
                    function renderLoggedInView(container, userData) {
                        container.innerHTML = `
                            <div class="relative" id="userDropdown">
                                <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                                    <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                                         alt="${userData.username || '用户头像'}"
                                         class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-blue transition-colors">
                                    <i class="fa fa-angle-down text-gray-500 hidden sm:block transition-transform duration-300" id="dropdownIcon"></i>
                                </button>
                                <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50" id="dropdownMenu">
                                    <a href="/profile/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">个人中心</a>
                                    <a href="/my_progress/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">学习进度</a>
                                    <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors" onclick="logout()">退出登录</a>
                                </div>
                            </div>
                        `;

                        // 绑定下拉菜单事件
                        bindDropdownEvents();
                    }

                    // 退出登录
                    function logout() {
                        try {
                            const token = localStorage.getItem('token');
                            // 发送退出登录请求到后端
                            fetch('/api/v1/logout', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            }).then(() => {
                                // 清除本地存储中的token
                                localStorage.removeItem('token');
                                // 刷新页面或跳转到登录页
                                window.location.href = '/';
                            });
                        }
                        catch (error) {
                            console.error('退出登录出错:', error);
                        }
                    }

                    // 渲染未登录视图
                    function renderLoggedOutView(container) {
                        container.innerHTML = `
                            <div class="flex items-center space-x-3">
                                <a href="/login" class="text-gray-600 hover:text-sysu-blue transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                    登录
                                </a>
                                <a href="/register" class="bg-sysu-blue text-white hover:bg-sysu-blue/90 transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                    注册
                                </a>
                            </div>
                        `;
                    }

                    // 绑定下拉菜单交互事件
                    function bindDropdownEvents() {
                        const dropdownTrigger = document.getElementById('dropdownTrigger');
                        const dropdownMenu = document.getElementById('dropdownMenu');
                        const dropdownIcon = document.getElementById('dropdownIcon');
                        const userDropdown = document.getElementById('userDropdown');

                        if (!dropdownTrigger || !dropdownMenu || !dropdownIcon) return;

                        // 点击头像按钮切换下拉菜单显示状态
                        dropdownTrigger.addEventListener('click', (e) => {
                            e.stopPropagation();
                            dropdownMenu.classList.toggle('hidden');
                            dropdownIcon.classList.toggle('rotate-180');
                        });

                        // 点击页面其他区域关闭下拉菜单
                        document.addEventListener('click', () => {
                            if (!dropdownMenu.classList.contains('hidden')) {
                                dropdownMenu.classList.add('hidden');
                                dropdownIcon.classList.remove('rotate-180');
                            }
                        });

                        // 点击下拉菜单内部不关闭
                        dropdownMenu.addEventListener('click', (e) => {
                            e.stopPropagation();
                        });

                        // 鼠标离开整个下拉区域时关闭
                        userDropdown.addEventListener('mouseleave', () => {
                            setTimeout(() => {
                                if (!dropdownMenu.matches(':hover') && !dropdownTrigger.matches(':hover')) {
                                    dropdownMenu.classList.add('hidden');
                                    dropdownIcon.classList.remove('rotate-180');
                                }
                            }, 300);
                        });
                    }

                    // 初始化平滑效果
                    function initSmoothEffects() {
                        // 导航栏显示动画
                        setTimeout(() => {
                            document.getElementById('navbar').classList.add('visible');
                        }, 100);

                        // 移动端菜单按钮事件
                        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
                        const mobileMenu = document.getElementById('mobile-menu');

                        if (mobileMenuBtn && mobileMenu) {
                            mobileMenuBtn.addEventListener('click', () => {
                                mobileMenu.classList.toggle('hidden');
                                // 添加菜单切换动画
                                if (!mobileMenu.classList.contains('hidden')) {
                                    mobileMenu.style.maxHeight = '0';
                                    mobileMenu.style.overflow = 'hidden';
                                    mobileMenu.style.transition = 'max-height 0.3s ease-out';
                                    setTimeout(() => {
                                        mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
                                    }, 10);
                                } else {
                                    mobileMenu.style.maxHeight = '0';
                                }
                            });
                        }

                        // 设置滚动显示动画
                        setupScrollAnimation();
                    }

                    // 设置滚动显示动画
                    function setupScrollAnimation() {
                        const fadeElements = document.querySelectorAll('.fade-in');

                        // 初始检查可见元素
                        checkFadeElements(fadeElements);

                        // 滚动时检查可见元素
                        window.addEventListener('scroll', () => {
                            checkFadeElements(fadeElements);
                        });
                    }

                    // 检查并显示进入视口的元素
                    function checkFadeElements(elements) {
                        elements.forEach((element, index) => {
                            const rect = element.getBoundingClientRect();
                            const windowHeight = window.innerHeight || document.documentElement.clientHeight;

                            // 元素进入视口
                            if (!element.classList.contains('visible')) {
                                // 依次显示，添加延迟效果
                                setTimeout(() => {
                                    element.classList.add('visible');
                                }, index * 200);
                            }
                        });
                    }
                    </script>

                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden p-2 text-gray-600 hover:text-sysu-main-green" id="mobile-menu-btn">
                        <i class="fa fa-bars text-lg"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端导航（默认隐藏） -->
            <div class="md:hidden hidden pb-4" id="mobile-menu">
                <div class="flex items-center relative mb-4">
                    <input type="text" placeholder="搜索题目/资源"
                           class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:border-sysu-main-green focus:outline-none focus:ring-2 focus:ring-sysu-main-green/20 w-full">
                    <i class="fa fa-search absolute left-3 text-gray-400"></i>
                </div>
                <nav class="flex flex-col space-x-3">
                    <a href="/" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue hover:text-sysu-main-green rounded transition-colors">首页</a>
                    <a href="/questions" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue hover:text-sysu-main-green rounded transition-colors">题库</a>
                    <a href="/contests" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue hover:text-sysu-main-green rounded transition-colors">竞赛</a>
                    <a href="/ranking" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue hover:text-sysu-main-green rounded transition-colors">排行榜</a>
                    <a href="/resources" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue hover:text-sysu-main-green rounded transition-colors">学习资源</a>
                </nav>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 用户信息和个人简介 -->
        <section class="mb-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 左侧：个人信息 -->
                <div class="lg:col-span-1">
                    <div class="stat-card h-full">
                        <div class="flex items-center mb-6">
                            <img src="https://picsum.photos/id/1005/80/80" alt="用户头像" class="w-16 h-16 rounded-full mr-4 border-2 border-sysu-lightBlue">
                            <div>
                                <h2 class="text-xl font-bold">张三</h2>
                                <p class="text-gray-500 text-sm">中山大学 计算机科学与技术</p>
                                <div class="flex items-center mt-1">
                                    <span class="badge bg-sysu-main-green/10 text-sysu-main-green">Lv.42 算法爱好者</span>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-3 mb-6">
                            <div class="flex items-start">
                                <i class="fa fa-map-marker text-gray-400 mt-1 mr-3 w-4 text-center"></i>
                                <span class="text-sm">广东 广州</span>
                            </div>
                            <div class="flex items-start">
                                <i class="fa fa-graduation-cap text-gray-400 mt-1 mr-3 w-4 text-center"></i>
                                <span class="text-sm">中山大学 2021级</span>
                            </div>
                            <div class="flex items-start">
                                <i class="fa fa-link text-gray-400 mt-1 mr-3 w-4 text-center"></i>
                                <a href="#" class="text-sm text-sysu-main-green hover:underline">个人博客</a>
                            </div>
                            <div class="flex items-start">
                                <i class="fa fa-calendar text-gray-400 mt-1 mr-3 w-4 text-center"></i>
                                <span class="text-sm">加入时间：2022-09-01</span>
                            </div>
                        </div>

                        <button class="w-full py-2 border border-sysu-main-green text-sysu-main-green rounded-lg hover:bg-sysu-main-green hover:text-white transition-colors text-sm font-medium">
                            编辑个人资料
                        </button>
                    </div>
                </div>

                <!-- 右侧：学习数据概览 -->
                <div class="lg:col-span-2">
                    <div class="stat-card h-full">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 环形进度图 -->
                            <div class="flex flex-col items-center justify-center">
                                <div class="relative" width="200" height="200">
                                    <!-- 环形进度图 -->
                                    <svg class="w-48 h-48" viewBox="0 0 100 100">
                                        <!-- 背景圆环 -->
                                        <circle cx="50" cy="50" r="45" fill="none" stroke="#F1F5F9" stroke-width="8"></circle>

                                        <!-- 已解答进度环 -->
                                        <circle class="progress-ring-circle" cx="50" cy="50" r="45" fill="none"
                                                stroke="#36B37E" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="113"></circle>

                                        <!-- 尝试中进度环 -->
                                        <circle class="progress-ring-circle" cx="50" cy="50" r="38" fill="none"
                                                stroke="#E8F0FE" stroke-width="4" stroke-dasharray="239" stroke-dashoffset="194"></circle>
                                    </svg>

                                    <!-- 中心文字 -->
                                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                                        <div class="text-3xl font-bold text-gray-800">1886</div>
                                        <div class="text-sm text-gray-500">/ 4074</div>
                                        <div class="text-xs text-gray-500 mt-1">已解答</div>
                                    </div>
                                </div>

                                <div class="mt-4 text-sm text-gray-500">
                                    <span class="inline-flex items-center mr-4">
                                        <span class="w-3 h-3 bg-sysu-main-green rounded-full mr-1"></span>
                                        已解答
                                    </span>
                                    <span class="inline-flex items-center">
                                        <span class="w-3 h-3 bg-sysu-lightBlue rounded-full mr-1"></span>
                                        112 尝试中
                                    </span>
                                </div>
                            </div>

                            <!-- 难度分布和勋章成就 -->
                            <div class="flex flex-col">
                                <!-- 难度分布 -->
                                <div class="mb-6">
                                    <h3 class="text-sm font-medium text-gray-500 mb-3">题目难度分布</h3>
                                    <div class="space-y-3">
                                        <div>
                                            <div class="flex justify-between text-sm mb-1">
                                                <span>简单</span>
                                                <span class="font-medium">393/1019</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-easy h-2 rounded-full" style="width: 38%"></div>
                                            </div>
                                        </div>

                                        <div>
                                            <div class="flex justify-between text-sm mb-1">
                                                <span>中等</span>
                                                <span class="font-medium">1027/2116</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-medium h-2 rounded-full" style="width: 48%"></div>
                                            </div>
                                        </div>

                                        <div>
                                            <div class="flex justify-between text-sm mb-1">
                                                <span>困难</span>
                                                <span class="font-medium">466/939</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-hard h-2 rounded-full" style="width: 50%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 勋章成就 -->
                                <div>
                                    <div class="flex justify-between items-center mb-3">
                                        <h3 class="text-sm font-medium text-gray-500">勋章成就</h3>
                                        <span class="text-sm font-medium text-sysu-main-green">11</span>
                                    </div>
                                    <div class="flex space-x-4">
                                        <div class="flex flex-col items-center">
                                            <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center mb-1">
                                                <span class="text-white font-bold">8月</span>
                                            </div>
                                            <span class="text-xs text-gray-500">连续</span>
                                        </div>

                                        <div class="flex flex-col items-center">
                                            <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center mb-1">
                                                <i class="fa fa-shield text-white text-xl"></i>
                                            </div>
                                            <span class="text-xs text-gray-500">守护者</span>
                                        </div>

                                        <div class="flex flex-col items-center">
                                            <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-purple-400 to-indigo-500 flex items-center justify-center mb-1">
                                                <span class="text-white font-bold">7月</span>
                                            </div>
                                            <span class="text-xs text-gray-500">连续</span>
                                        </div>

                                        <div class="flex flex-col items-center">
                                            <div class="w-14 h-14 rounded-lg bg-gray-100 flex items-center justify-center mb-1 border border-dashed border-gray-300">
                                                <i class="fa fa-plus text-gray-400"></i>
                                            </div>
                                            <span class="text-xs text-gray-500">更多</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-8">
            <!-- 使用网格容器将两个卡片并排显示 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 学习目标 - 占1列 -->
                <div class="lg:col-span-1">
                    <div class="stat-card bg-white rounded-lg shadow-md p-4 h-full">
                        <h3 class="text-lg font-bold mb-6">我的学习目标</h3>

                        <div class="space-y-6">
                            <!-- 当前目标 -->
                            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                <div class="flex justify-between items-start mb-4">
                                    <h4 class="font-medium">月度目标：完成50题</h4>
                                    <span class="text-sm text-gray-500">剩余12天</span>
                                </div>
                                <div class="mb-2">
                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-sysu-main-green h-2.5 rounded-full" style="width: 68%"></div>
                                    </div>
                                </div>
                                <div class="flex justify-between text-sm text-gray-500">
                                    <span>已完成34题</span>
                                    <span>68%</span>
                                </div>
                            </div>

                            <!-- 长期目标 -->
                            <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                <div class="flex justify-between items-start mb-4">
                                    <h4 class="font-medium">年度目标：完成500题</h4>
                                    <span class="text-sm text-gray-500">剩余146天</span>
                                </div>
                                <div class="mb-2">
                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-sysu-main-green h-2.5 rounded-full" style="width: 36%"></div>
                                    </div>
                                </div>
                                <div class="flex justify-between text-sm text-gray-500">
                                    <span>已完成180题</span>
                                    <span>36%</span>
                                </div>
                            </div>
                        </div>

                        <button class="mt-6 text-sysu-main-green hover:text-sysu-main-green/80 font-medium flex items-center transition-colors">
                            <i class="fa fa-plus-circle mr-2"></i> 添加新目标
                        </button>
                    </div>
                </div>

                <!-- 刷题日历 - 占2列 -->
                <div class="lg:col-span-2">
                    <div class="stat-card bg-white rounded-lg shadow-md p-4 h-full">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                            <div>
                                <h3 class="text-lg font-bold">刷题日历</h3>
                                <p class="text-sm text-gray-500">过去一年共提交 6,315 次 | 连续提交: 218 天</p>
                            </div>

                            <div class="flex items-center mt-3 md:mt-0">
                                <button id="prev-month" class="p-2 rounded hover:bg-gray-100 transition-colors mr-2">
                                    <i class="fa fa-chevron-left text-gray-600"></i>
                                </button>
                                <h4 id="current-month" class="text-gray-800 font-medium">2023年9月</h4>
                                <button id="next-month" class="p-2 rounded hover:bg-gray-100 transition-colors ml-2">
                                    <i class="fa fa-chevron-right text-gray-600"></i>
                                </button>

                                <div class="ml-6 flex items-center">
                                    <div class="flex items-center mr-4">
                                        <span class="w-3 h-3 bg-gray-200 rounded-sm mr-2"></span>
                                        <span class="text-xs text-gray-600">无刷题</span>
                                    </div>
                                    <div class="flex items-center mr-4">
                                        <span class="w-3 h-3 bg-sysu-lightBlue rounded-sm mr-2"></span>
                                        <span class="text-xs text-gray-600">1-3题</span>
                                    </div>
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 bg-sysu-main-green rounded-sm mr-2"></span>
                                        <span class="text-xs text-gray-600">4题以上</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 星期标题 -->
                        <div class="grid grid-cols-7 gap-1 mb-2 text-center">
                            <div class="text-xs font-medium text-gray-500 py-2">日</div>
                            <div class="text-xs font-medium text-gray-500 py-2">一</div>
                            <div class="text-xs font-medium text-gray-500 py-2">二</div>
                            <div class="text-xs font-medium text-gray-500 py-2">三</div>
                            <div class="text-xs font-medium text-gray-500 py-2">四</div>
                            <div class="text-xs font-medium text-gray-500 py-2">五</div>
                            <div class="text-xs font-medium text-gray-500 py-2">六</div>
                        </div>

                        <!-- 日历网格 - 将通过JavaScript动态生成 -->
                        <div id="calendar-grid" class="grid grid-cols-7 gap-1">
                            <!-- 日历内容将通过JavaScript动态生成 -->
                        </div>

                        <!-- 月度统计摘要 -->
                        <div class="mt-6 pt-4 border-t border-gray-100 grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-sysu-main-green/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-check text-sysu-main-green"></i>
                                </div>
                                <div>
                                    <div class="text-sm text-gray-500">本月完成</div>
                                    <div class="text-lg font-bold">42题</div>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-sysu-yellow/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-clock-o text-sysu-yellow"></i>
                                </div>
                                <div>
                                    <div class="text-sm text-gray-500">尝试中</div>
                                    <div class="text-lg font-bold">8题</div>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-sysu-green/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-calendar-check-o text-sysu-green"></i>
                                </div>
                                <div>
                                    <div class="text-sm text-gray-500">本月刷题天数</div>
                                    <div class="text-lg font-bold">26天</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- 最近活动和统计图表 -->
        <section class="mb-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 最近通过的题目 -->
                <div class="lg:col-span-2">
                    <div class="stat-card h-full">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-bold">最近活动</h3>
                            <div class="flex space-x-2">
                                <button class="text-sm text-sysu-main-green font-medium border-b-2 border-sysu-main-green pb-1">最近通过</button>
                                <button class="text-sm text-gray-500 hover:text-sysu-main-green pb-1">题单</button>
                                <button class="text-sm text-gray-500 hover:text-sysu-main-green pb-1">题解</button>
                            </div>
                        </div>

                        <!-- 题目列表 -->
                        <div class="space-y-4">
                            <!-- 题目项 - 已完成 -->
                            <div class="border-l-4 border-easy pl-4 py-2 hover:bg-gray-50 rounded-r-lg transition-colors">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                    <div>
                                        <div class="flex items-center">
                                            <a href="#" class="font-medium hover:text-sysu-main-green transition-colors">两数之和</a>
                                            <span class="badge bg-easy/10 text-easy ml-2">简单</span>
                                        </div>
                                        <div class="flex items-center mt-1 text-sm text-gray-500">
                                            <span>完成于今天 14:35</span>
                                            <span class="mx-2">·</span>
                                            <span>数组 | 哈希表</span>
                                        </div>
                                    </div>
                                    <div class="mt-2 md:mt-0 flex items-center">
                                        <span class="text-sm text-gray-500 mr-3">提交次数: 1</span>
                                        <button class="text-sysu-main-green hover:text-sysu-darkBlue">
                                            <i class="fa fa-code"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 题目项 - 已完成 -->
                            <div class="border-l-4 border-easy pl-4 py-2 hover:bg-gray-50 rounded-r-lg transition-colors">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                    <div>
                                        <div class="flex items-center">
                                            <a href="#" class="font-medium hover:text-sysu-main-green transition-colors">有效的括号</a>
                                            <span class="badge bg-easy/10 text-easy ml-2">简单</span>
                                        </div>
                                        <div class="flex items-center mt-1 text-sm text-gray-500">
                                            <span>完成于昨天 09:12</span>
                                            <span class="mx-2">·</span>
                                            <span>栈 | 字符串</span>
                                        </div>
                                    </div>
                                    <div class="mt-2 md:mt-0 flex items-center">
                                        <span class="text-sm text-gray-500 mr-3">提交次数: 2</span>
                                        <button class="text-sysu-main-green hover:text-sysu-darkBlue">
                                            <i class="fa fa-code"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 题目项 - 尝试中 -->
                            <div class="border-l-4 border-medium pl-4 py-2 hover:bg-gray-50 rounded-r-lg transition-colors">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                    <div>
                                        <div class="flex items-center">
                                            <a href="#" class="font-medium hover:text-sysu-main-green transition-colors">最大子数组和</a>
                                            <span class="badge bg-medium/10 text-medium ml-2">中等</span>
                                        </div>
                                        <div class="flex items-center mt-1 text-sm text-gray-500">
                                            <span>最后尝试: 昨天 21:45</span>
                                            <span class="mx-2">·</span>
                                            <span>数组 | 动态规划</span>
                                        </div>
                                    </div>
                                    <div class="mt-2 md:mt-0 flex items-center">
                                        <span class="text-sm text-gray-500 mr-3">提交次数: 3</span>
                                        <button class="text-sysu-main-green hover:text-sysu-darkBlue">
                                            <i class="fa fa-code"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 题目项 - 已完成 -->
                            <div class="border-l-4 border-medium pl-4 py-2 hover:bg-gray-50 rounded-r-lg transition-colors">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                    <div>
                                        <div class="flex items-center">
                                            <a href="#" class="font-medium hover:text-sysu-main-green transition-colors">LRU 缓存</a>
                                            <span class="badge bg-medium/10 text-medium ml-2">中等</span>
                                        </div>
                                        <div class="flex items-center mt-1 text-sm text-gray-500">
                                            <span>完成于3天前</span>
                                            <span class="mx-2">·</span>
                                            <span>设计 | 哈希表</span>
                                        </div>
                                    </div>
                                    <div class="mt-2 md:mt-0 flex items-center">
                                        <span class="text-sm text-gray-500 mr-3">提交次数: 5</span>
                                        <button class="text-sysu-main-green hover:text-sysu-darkBlue">
                                            <i class="fa fa-code"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 题目项 - 尝试中 -->
                            <div class="border-l-4 border-hard pl-4 py-2 hover:bg-gray-50 rounded-r-lg transition-colors">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                    <div>
                                        <div class="flex items-center">
                                            <a href="#" class="font-medium hover:text-sysu-main-green transition-colors">接雨水</a>
                                            <span class="badge bg-hard/10 text-hard ml-2">困难</span>
                                        </div>
                                        <div class="flex items-center mt-1 text-sm text-gray-500">
                                            <span>最后尝试: 5天前</span>
                                            <span class="mx-2">·</span>
                                            <span>栈 | 双指针</span>
                                        </div>
                                    </div>
                                    <div class="mt-2 md:mt-0 flex items-center">
                                        <span class="text-sm text-gray-500 mr-3">提交次数: 8</span>
                                        <button class="text-sysu-main-green hover:text-sysu-darkBlue">
                                            <i class="fa fa-code"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6 text-center">
                            <a href="#" class="text-sysu-main-green hover:text-sysu-darkBlue font-medium text-sm">查看所有记录 <i class="fa fa-angle-right ml-1"></i></a>
                        </div>
                    </div>
                </div>

                <!-- 学习统计图表 -->
                <div class="lg:col-span-1">
                    <div class="stat-card h-full">
                        <h3 class="text-lg font-bold mb-6">刷题趋势</h3>
                        <div class="h-64">
                            <canvas id="progressChart"></canvas>
                        </div>

                        <div class="mt-8">
                            <h3 class="text-lg font-bold mb-4">题目类型分布</h3>
                            <div class="space-y-3">
                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span>数组</span>
                                        <span class="font-medium">25%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-sysu-main-green h-2 rounded-full" style="width: 25%"></div>
                                    </div>
                                </div>

                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span>字符串</span>
                                        <span class="font-medium">18%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-sysu-purple h-2 rounded-full" style="width: 18%"></div>
                                    </div>
                                </div>

                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span>动态规划</span>
                                        <span class="font-medium">15%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-sysu-green h-2 rounded-full" style="width: 15%"></div>
                                    </div>
                                </div>

                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span>树</span>
                                        <span class="font-medium">12%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-sysu-yellow h-2 rounded-full" style="width: 12%"></div>
                                    </div>
                                </div>

                                <div>
                                    <div class="flex justify-between text-sm mb-1">
                                        <span>其他类型</span>
                                        <span class="font-medium">30%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-gray-400 h-2 rounded-full" style="width: 30%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    </main>

    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start">
                        <div class="w-10 h-10 bg-white text-sysu-main-green rounded-lg flex items-center justify-center mr-3">
                            <i class="fa fa-graduation-cap text-xl"></i>
                        </div>
                        <h2 class="text-lg font-bold">中山大学刷题平台</h2>
                    </div>
                    <p class="text-gray-400 text-sm mt-2 text-center md:text-left">提升编程能力，培养算法思维</p>
                </div>

                <div class="flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm text-gray-400">
                    <a href="#" class="hover:text-white transition-colors">关于我们</a>
                    <a href="#" class="hover:text-white transition-colors">使用帮助</a>
                    <a href="#" class="hover:text-white transition-colors">常见问题</a>
                    <a href="#" class="hover:text-white transition-colors">联系我们</a>
                    <a href="#" class="hover:text-white transition-colors">隐私政策</a>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 中山大学刷题平台. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 日历详情模态框 -->
    <div id="calendar-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl w-full max-w-md p-6 transform transition-all">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold" id="modal-date">2023年9月15日</h3>
                <button id="close-modal" class="text-gray-500 hover:text-gray-800">
                    <i class="fa fa-times"></i>
                </button>
            </div>

            <div class="mb-4">
                <p class="text-sm text-gray-500 mb-2">当日刷题统计</p>
                <div class="flex items-center justify-between">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-gray-800">5</div>
                        <div class="text-xs text-gray-500">完成题目</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-gray-800">2</div>
                        <div class="text-xs text-gray-500">尝试中</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-gray-800">12</div>
                        <div class="text-xs text-gray-500">提交次数</div>
                    </div>
                </div>
            </div>

            <div>
                <p class="text-sm text-gray-500 mb-3">完成题目</p>
                <div class="space-y-2 max-h-40 overflow-y-auto pr-2">
                    <div class="text-sm p-2 bg-gray-50 rounded-lg">
                        <a href="#" class="font-medium hover:text-sysu-main-green">两数之和</a>
                        <span class="badge bg-easy/10 text-easy ml-2">简单</span>
                    </div>
                    <div class="text-sm p-2 bg-gray-50 rounded-lg">
                        <a href="#" class="font-medium hover:text-sysu-main-green">有效的括号</a>
                        <span class="badge bg-easy/10 text-easy ml-2">简单</span>
                    </div>
                    <div class="text-sm p-2 bg-gray-50 rounded-lg">
                        <a href="#" class="font-medium hover:text-sysu-main-green">合并两个有序链表</a>
                        <span class="badge bg-easy/10 text-easy ml-2">简单</span>
                    </div>
                </div>
            </div>

            <button class="mt-6 w-full py-2 bg-sysu-main-green text-white rounded-lg hover:bg-sysu-darkBlue transition-colors text-sm font-medium">
                查看详细记录
            </button>
        </div>
    </div>

    <script>
        // 当前显示的年月
        let currentDate = new Date();
        let currentMonth = currentDate.getMonth();
        let currentYear = currentDate.getFullYear();

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 生成日历
            generateCalendar(currentYear, currentMonth);

            // 初始化图表
            initCharts();

            // 初始化事件监听
            initEventListeners();

            // 页面加载动画
            const fadeElements = document.querySelectorAll('.stat-card');
            fadeElements.forEach((el, index) => {
                setTimeout(() => {
                    el.classList.add('opacity-100');
                    el.classList.remove('opacity-0', 'translate-y-4');
                }, 100 * index);
            });
        });

        // 生成矩阵式日历
        function generateCalendar(year, month) {
            const calendarGrid = document.getElementById('calendar-grid');
            calendarGrid.innerHTML = '';

            // 更新标题显示
            const monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
            document.getElementById('current-month').textContent = `${year}年${monthNames[month]}`;

            // 获取当月第一天是星期几 (0-6, 0是星期日)
            const firstDay = new Date(year, month, 1).getDay();

            // 获取当月的天数
            const daysInMonth = new Date(year, month + 1, 0).getDate();

            // 获取上个月的天数
            const daysInPrevMonth = new Date(year, month, 0).getDate();

            // 添加上个月的最后几天
            for (let i = 0; i < firstDay; i++) {
                const day = daysInPrevMonth - firstDay + i + 1;
                const dayElement = createDayElement(day, false);
                calendarGrid.appendChild(dayElement);
            }

            // 添加当月的天数
            for (let day = 1; day <= daysInMonth; day++) {
                const dayElement = createDayElement(day, true);

                // 随机生成一些有活动的日期（实际应用中应从数据库获取）
                const random = Math.random();
                if (random > 0.7) {
                    dayElement.classList.add('high-activity');
                    dayElement.setAttribute('data-count', Math.floor(Math.random() * 10) + 4); // 4-13题
                } else if (random > 0.4) {
                    dayElement.classList.add('has-activity');
                    dayElement.setAttribute('data-count', Math.floor(Math.random() * 3) + 1); // 1-3题
                } else {
                    dayElement.setAttribute('data-count', 0);
                }

                // 为当天添加点击事件
                dayElement.addEventListener('click', function() {
                    showDayDetails(year, month + 1, day, this.getAttribute('data-count'));
                });

                calendarGrid.appendChild(dayElement);
            }

            // 添加下个月的前几天，补全网格
            const totalDays = firstDay + daysInMonth;
            const nextMonthDays = 42 - totalDays; // 6行 × 7列 = 42个格子

            for (let day = 1; day <= nextMonthDays; day++) {
                const dayElement = createDayElement(day, false);
                calendarGrid.appendChild(dayElement);
            }
        }

        // 创建日历日期元素
        function createDayElement(day, isCurrentMonth) {
            const dayElement = document.createElement('div');
            dayElement.className = 'calendar-day flex items-center justify-center';
            dayElement.textContent = day;

            if (!isCurrentMonth) {
                dayElement.classList.add('other-month');
            }

            // 标记今天
            const today = new Date();
            if (isCurrentMonth &&
                day === today.getDate() &&
                currentMonth === today.getMonth() &&
                currentYear === today.getFullYear()) {
                dayElement.classList.add('border-2', 'border-sysu-main-green');
            }

            return dayElement;
        }

        // 显示日期详情
        function showDayDetails(year, month, day, count) {
            const modal = document.getElementById('calendar-modal');
            const modalDate = document.getElementById('modal-date');

            modalDate.textContent = `${year}年${month}月${day}日`;
            modal.classList.remove('hidden');

            // 阻止背景滚动
            document.body.style.overflow = 'hidden';
        }

        // 初始化图表
        function initCharts() {
            const ctx = document.getElementById('progressChart').getContext('2d');

            // 过去6个月的刷题数据
            const months = ['4月', '5月', '6月', '7月', '8月', '9月'];
            const completedData = [32, 28, 45, 38, 42, 34];
            const attemptedData = [8, 12, 15, 10, 8, 5];

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: months,
                    datasets: [
                        {
                            label: '完成题目',
                            data: completedData,
                            borderColor: '#1E50B3',
                            backgroundColor: 'rgba(30, 80, 179, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '尝试题目',
                            data: attemptedData,
                            borderColor: '#E8F0FE',
                            backgroundColor: 'rgba(232, 240, 254, 0.1)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: true,
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                boxWidth: 10,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        }
                    }
                }
            });
        }

        // 初始化事件监听
        function initEventListeners() {
            // 月份切换
            document.getElementById('prev-month').addEventListener('click', function() {
                currentMonth--;
                if (currentMonth < 0) {
                    currentMonth = 11;
                    currentYear--;
                }
                generateCalendar(currentYear, currentMonth);
            });

            document.getElementById('next-month').addEventListener('click', function() {
                currentMonth++;
                if (currentMonth > 11) {
                    currentMonth = 0;
                    currentYear++;
                }
                generateCalendar(currentYear, currentMonth);
            });

            // 关闭模态框
            document.getElementById('close-modal').addEventListener('click', function() {
                document.getElementById('calendar-modal').classList.add('hidden');
                document.body.style.overflow = ''; // 恢复滚动
            });

            // 点击模态框外部关闭
            document.getElementById('calendar-modal').addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.add('hidden');
                    document.body.style.overflow = ''; // 恢复滚动
                }
            });

            // 用户下拉菜单
            const dropdownTrigger = document.getElementById('dropdownTrigger');
            const dropdownMenu = document.getElementById('dropdownMenu');
            const dropdownIcon = document.getElementById('dropdownIcon');

            dropdownTrigger.addEventListener('click', function() {
                dropdownMenu.classList.toggle('hidden');
                dropdownIcon.classList.toggle('rotate-180');
            });

            // 点击外部关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!dropdownTrigger.contains(e.target) && !dropdownMenu.contains(e.target)) {
                    dropdownMenu.classList.add('hidden');
                    dropdownIcon.classList.remove('rotate-180');
                }
            });

            // 移动端菜单
            const mobileMenuBtn = document.getElementById('mobile-menu-btn');
            const mobileMenu = document.getElementById('mobile-menu');

            mobileMenuBtn.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // 退出登录函数
        function logout() {
            // 实际应用中这里会处理退出登录逻辑
            alert('退出登录成功');
        }
    </script>
</body>
</html>
